<template>
	<view>
		<withdrawal class="withdrawal" ref="withdrawal"></withdrawal>
		<view class="subsectionBox">
			<uv-subsection :list="list" :current="current" mode="subsection" activeColor="#fd4a46" inactiveColor="#000" @change="switchChange"></uv-subsection>
		</view>
		<view class="itemPicker">
			<uDatetimePicker placeholder="至" v-model="range" :clear-icon="false" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" @change="dayChange" />
		</view>
		<scroll-view scroll-y class="content" style="font-size:24rpx;margin-top:6px;" @scrolltolower="lower"
			:style="{height:(windowHeight - (withdrawalHeight+subsectionBoxHeight))+'px'}">
			<view class="uv-collapse-contentS" v-for="item in dataInfo">
				<view class="uvCollapseShopImg">
					<image :src="item.headimg"></image>
				</view>
				<view class="uvCollapseShopInfo">
					<view>{{ item.nickname }}</view>
					<view>订单编号：{{ item.order_id }}</view>
					<view v-show="current == 0">{{ item.payment_time }}</view>
					<view v-show="current == 1">核销时间：{{ item.verify_time }}</view>
					<view class="timeByMoney">
						<text class="themeColor weight_bold">订单金额：{{ item.amount?item.amount:'0.00' }}</text>
						<text class="themeColor weight_bold">让利后金额：{{ ' ' }}{{ item.cash_amount?item.cash_amount:'0.00' }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<loading v-if="loading"></loading>
	</view>
</template>
<script>
var app = getApp();
import withdrawal from '../utils/withdrawal.vue';
import uDatetimePicker from '../uni-datetime-picker_2.2.25/components/uni-datetime-picker/uni-datetime-picker.vue';
import person from '../utils/person.js';
export default {
	components: {
		withdrawal,
		uDatetimePicker
	},
	data() {
		return {
			loading:true,
			list: ['扫码支付订单', '线下核销订单'],
			current:0,
			start_date: '', // 开始日期
			end_date: '', // 结束日期
			range: [],//存放时间list
			withdrawalHeight: 0, //佣金框高度
			windowHeight: 0,//屏幕总高度
			page: 1,//当前页
			dataInfo: [], //存放数据lIst
			last_page: 0,//总页数
			subsectionBoxHeight:0, //Tab组件高度
		}
	},

	mounted() {
		uni.setStorageSync('pageType','2'); //暂时用于提现判断,1:合伙人提现.2:商户提现
		//获取屏幕高度
		uni.getSystemInfo({
			success: (res) => {
				this.windowHeight = res.windowHeight - 50; //45为选择日期高度
			}
		});
		
		//获取Tab高度
		uni.createSelectorQuery().in(this).select('.subsectionBox').boundingClientRect((rect) => {
			this.subsectionBoxHeight = rect.height; 
		}).exec();

		//获取子页面组件高度
		this.$nextTick(function () {
			this.withdrawalHeight = this.$refs.withdrawal.contentHeight;
			console.log(this.withdrawalHeight,'a a a ')
		});
		this.getData();
		this.getStoreInfo();
	},

	methods: {
		//滚动底部触发事件
		lower(e) {
			if (this.page < this.last_page) {
				this.page++;
				this.getData();
			}
		},
		
		//切换事件
		switchChange(index){
			this.current = index;
			this.dataInfo = []; //清空list数组
			this.page = 1; //默认当前页
			this.start_date = ''; // 开始日期
			this.end_date = ''; // 结束日期
			this.range = [];//存放时间list
			this.getData();
		},
		
		// 日期改变
		dayChange(e) {
			this.page = 1;
			this.range = e;
			this.start_date = this.range[0];
			this.end_date = this.range[1];
			this.dataInfo = [];//清空数据
			this.getData();
		},

		//获取数据
		getData() {
			let _this = this;
			this.loading = true;
			app.get('ApiBusiness/btransaction', {page:_this.page,start_date:_this.start_date,end_date:_this.end_date}, function (res) {
				_this.loading = false;
				_this.last_page = res.data.last_page;
				let list = [];
				if(_this.current == 0){
					list = res.data.data;
				}else{
					list = res.data_2.data;
				}
				list.forEach(item => {
					_this.dataInfo.push(item);
				})
			});
		},

		//获取商户余额
		getStoreInfo() {
			let _this = this;
			app.get('ApiStore/getStoreInfo', { page: _this.page, limit: 10 }, function (res) {
				person.shopData.shopName = res.name;//门店名称
				person.shopData.image = res.logo;//门店图片
				person.shopData.amount = res.amount;//余额
				person.shopData.Damount = res.nocash_amount;//待结算金额
				person.shopData.Kamount = res.cash_amount;//可体现金额
				person.shopData.phone = res.tel || '暂无手机号';//手机号
				person.shopData.todayAmount = res.today_amount; //今日营业额
			});
		},
	}
}
</script>

<style lang="less">
.size24 {
	font-size: 24rpx;
}

.weight_bold {
	font-weight: bold;
}

.themeColor {
	color: #f56c6c;
}

.timeByMoney {
	display: flex;
	justify-content: space-between;
}

.itemPicker{
	width:96%;
	margin:5px 2% 0 2%;
	float:left;
}

.subsectionBox {
	width: 96%;
	float: left;
	margin: 0 2%;
	height: 5vh;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
}

.content {
	width: 100%;
	float: left;
}

.partnerListBox {
	width: 94%;
	float: left;
	margin-left: 3%;
}

.partnerList {
	width: 94%;
	background-color: #fdf8f6;
	float: left;
	padding: 20rpx 3%;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	display: flex;
}

.partnerList image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}

.partnerData {
	margin-left: 20rpx;
	font-size: 26rpx;
	width: calc(100% - 140rpx);
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 45rpx;
}

::v-deep .uv-collapse-item__content__text {
	padding: 0;
}

// ::v-deep .uv-cell__body{
// 	margin:20rpx 0;
// }

.collapseImg {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}

.uv-collapse-content {
	width: 94%;
	margin: 0 3%;
	padding: 5rpx 0 5rpx 0;
	display: flex;
	align-items: center;
	/* 	background-color: aqua; */
	// margin-bottom: 20rpx;
}

.uv-collapse-contentS {
	width: 96%;
	margin: 0 2%;
	padding: 20rpx;
	display: flex;
	align-items: center;
	/* 	background-color: aqua; */
	margin-bottom: 17rpx;
	box-shadow: 0 2px 5px #CCCCCC;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}

.uvCollapseShopImg {
	width: 70rpx;
	height: 70rpx;
	float: left;
}

.uvCollapseShopImg image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.collapseContent {
	width: 100%;
	// max-height:500rpx;
	// margin-top:20rpx;
	display: flex;
	font-size: 24rpx;
}

.uvCollapseShopInfo {
	width: calc(100% - 90rpx);
	float: left;
	margin-left: 15rpx;
	line-height: 40rpx;
}

/* ::v-deep .uni-scroll-view-content{
		display: flex;
		align-items:center;
	} */
</style>